<div id="c3" class="page-layout simple fullwidth doc-page chart-doc-page">

    <!-- HEADER -->
    <div class="header md-accent-bg" layout="row" layout-align="space-between">
        <div layout="column" layout-align="center start">
            <div class="breadcrumb" layout="row" layout-align="start center">
                <md-icon md-font-icon="icon-home" class="s16"></md-icon>
                <md-icon md-font-icon="icon-chevron-right" class="s16 separator"></md-icon>
                <span class="parent">COMPONENTS</span>
                <md-icon md-font-icon="icon-chevron-right" class="s16 separator"></md-icon>
                <span class="parent">CHARTS</span>
            </div>
            <div class="title">C3.js</div>
        </div>

        <div layout="row" layout-align="start center">
            <md-button class="md-raised reference-button" href="http://jettro.github.io/c3-angular-directive/"
                       target="_blank">
                <md-icon md-font-icon="icon-link"></md-icon>
                <span>Reference</span>
            </md-button>
        </div>
    </div>
    <!-- / HEADER -->

    <!-- CONTENT -->
    <div class="content">

        <div class="md-title">Line Chart</div>
        <div class="card md-whiteframe-4dp">
            <c3chart bindto-id="line-chart">
                <chart-column column-id="data 1"
                              column-name="Data 1"
                              column-color="red"
                              column-values="30,200,100,400,150,250"
                              column-type="line"/>
                <chart-column column-id="data 2"
                              column-name="Data 2"
                              column-color="green"
                              column-values="50,20,10,40,15,25"
                              column-type="line"/>
                    <chart-grid show-x="false" show-y="true">
                </chart-grid>
            </c3chart>
        </div>

        <div class="md-title">Line Area Chart</div>
        <div class="card md-whiteframe-4dp">
            <c3chart bindto-id="line-area-chart">
                <chart-column column-id="data 1"
                              column-name="Data 1"
                              column-color="red"
                              column-values="30,200,100,400,150,250"
                              column-type="area"/>
                <chart-column column-id="data 2"
                              column-name="Data 2"
                              column-color="green"
                              column-values="50,20,10,40,15,25"
                              column-type="area"/>
                <chart-grid show-x="false" show-y="true">
                </chart-grid>
            </c3chart>
        </div>

        <div class="md-title">Spline Chart</div>
        <div class="card md-whiteframe-4dp">
            <c3chart bindto-id="spline-chart">
                <chart-column column-id="data 1"
                              column-name="Data 1"
                              column-color="red"
                              column-values="30,200,100,400,150,250"
                              column-type="spline"/>
                <chart-column column-id="data 2"
                              column-name="Data 2"
                              column-color="green"
                              column-values="50,20,10,40,15,25"
                              column-type="spline"/>
                <chart-grid show-x="false" show-y="true">
                </chart-grid>
            </c3chart>
        </div>


        <div class="md-title">Spline Area Chart</div>
        <div class="card md-whiteframe-4dp">
            <c3chart bindto-id="spline-area-chart">
                <chart-column column-id="data 1"
                              column-name="Data 1"
                              column-color="red"
                              column-values="30,200,100,400,150,250"
                              column-type="area-spline"/>
                <chart-column column-id="data 2"
                              column-name="Data 2"
                              column-color="green"
                              column-values="50,20,10,40,15,25"
                              column-type="area-spline"/>
                <chart-grid show-x="false" show-y="true">
                </chart-grid>
            </c3chart>
        </div>

        <div class="md-title">Step Chart</div>
        <div class="card md-whiteframe-4dp">
            <c3chart bindto-id="step-chart">
                <chart-column column-id="data 1"
                              column-name="Data 1"
                              column-color="red"
                              column-values="30,200,100,400,150,250"
                              column-type="step"/>
                <chart-column column-id="data 2"
                              column-name="Data 2"
                              column-color="green"
                              column-values="50,20,10,40,15,25"
                              column-type="step"/>
                <chart-grid show-x="false" show-y="true">
                </chart-grid>
            </c3chart>
        </div>

        <div class="md-title">Step Area Chart</div>
        <div class="card md-whiteframe-4dp">
            <c3chart bindto-id="step-area-chart">
                <chart-column column-id="data 1"
                              column-name="Data 1"
                              column-color="red"
                              column-values="30,200,100,400,150,250"
                              column-type="area-step"/>
                <chart-column column-id="data 2"
                              column-name="Data 2"
                              column-color="green"
                              column-values="50,20,10,40,15,25"
                              column-type="area-step"/>
                <chart-grid show-x="false" show-y="true">
                </chart-grid>
            </c3chart>
        </div>

        <div class="md-title">Stacked Bar Chart</div>
        <div class="card md-whiteframe-4dp">
            <c3chart bindto-id="stacked-bar-plot1-chart">
                <chart-column column-id="data 1"
                              column-name="Data 1"
                              column-color="red"
                              column-values="30,200,100,400,150,250"
                              column-type="bar"/>
                <chart-column column-id="data 2"
                              column-name="Data 2"
                              column-color="green"
                              column-values="50,20,10,40,15,25"
                              column-type="bar"/>
                <chart-group group-values="data 1,data 2"/>
            </c3chart>
        </div>

        <div class="md-title">Scatter Plot Chart</div>
        <div class="card md-whiteframe-4dp">
            <c3chart bindto-id="scatter-plot2-chart">
                <chart-column column-id="Data 1 x"
                              column-values="3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2.0, 3.0, 2.2, 2.9, 2.9, 3.1, 3.0, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3.0, 2.8, 3.0, 2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3.0, 3.4, 3.1, 2.3, 3.0, 2.5, 2.6, 3.0, 2.6, 2.3, 2.7, 3.0, 2.9, 2.9, 2.5, 2.8"/>
                <chart-column column-id="Data 2 x"
                              column-values="3.3, 2.7, 3.0, 2.9, 3.0, 3.0, 2.5, 2.9, 2.5, 3.6, 3.2, 2.7, 3.0, 2.5, 2.8, 3.2, 3.0, 3.8, 2.6, 2.2, 3.2, 2.8, 2.8, 2.7, 3.3, 3.2, 2.8, 3.0, 2.8, 3.0, 2.8, 3.8, 2.8, 2.8, 2.6, 3.0, 3.4, 3.1, 3.0, 3.1, 3.1, 3.1, 2.7, 3.2, 3.3, 3.0, 2.5, 3.0, 3.4, 3.0"/>
                <chart-column column-id="Data 1"
                              column-values="1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3"
                              column-type="scatter"/>
                <chart-column column-id="Data 2"
                              column-values="2.5, 1.9, 2.1, 1.8, 2.2, 2.1, 1.7, 1.8, 1.8, 2.5, 2.0, 1.9, 2.1, 2.0, 2.4, 2.3, 1.8, 2.2, 2.3, 1.5, 2.3, 2.0, 2.0, 1.8, 2.1, 1.8, 1.8, 1.8, 2.1, 1.6, 1.9, 2.0, 2.2, 1.5, 1.4, 2.3, 2.4, 1.8, 1.8, 2.1, 2.4, 2.3, 1.9, 2.3, 2.5, 2.3, 1.9, 2.0, 2.3, 1.8"
                              column-type="scatter"/>
                <chart-axes values-xs="Data 1:Data 1 x,Data 2:Data 2 x"/>
            </c3chart>
        </div>

        <div class="md-title">Pie Chart</div>
        <div class="card md-whiteframe-4dp">
            <c3chart bindto-id="pie-plot1-chart">
                <chart-column column-id="Data 1"
                              column-values="70"
                              column-type="pie"/>
                <chart-column column-id="Data 2"
                              column-values="35"
                              column-type="pie"/>
                <chart-column column-id="Data 3"
                              column-values="60"
                              column-type="pie"/>
                <chart-pie expand="true"/>
            </c3chart>
        </div>


        <div class="md-title">Donut Chart</div>
        <div class="card md-whiteframe-4dp">
            <c3chart bindto-id="donut-plot1-chart">
                <chart-column column-id="Data 1"
                              column-values="70"
                              column-type="donut"/>
                <chart-column column-id="Data 2"
                              column-values="35"
                              column-type="donut"/>
                <chart-column column-id="Data 3"
                              column-values="60"
                              column-type="donut"/>
                <chart-donut title="Donut" width="60"/>
            </c3chart>
        </div>

        <div class="md-title">Gauge Chart</div>
        <div class="card md-whiteframe-4dp">
            <c3chart bindto-id="gauge-plot1-chart">
                <chart-column column-id="Data 1"
                              column-values="70"
                              column-type="gauge"/>
                <chart-gauge min="50"
                             max="75"
                             units=" hours"
                             width="39"/>
            </c3chart>
        </div>

    </div>
    <!-- / CONTENT -->

</div>